import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:whale/helper/utils/util.dart';

import '../index.dart';

/// hello
class IMRecordTipWidget extends StatelessWidget {
  IMRecordTipWidget({Key? key}) : super(key: key);
  final controller = Get.put(ImInputVoiceController());
  final state = Get.find<ImInputVoiceController>().state;
  @override
  Widget build(BuildContext context) {
    return GetBuilder<ImInputVoiceController>(
      builder: (_) {
        return Container(
          width: 1.sw,
          height: 1.sh,
          color: Colors.black54,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                margin: EdgeInsets.only(bottom: 80.r),
                child: Stack(
                  children: [
                    Positioned(
                      bottom: 0,
                      left: 80.r,
                      child: Transform.rotate(
                        angle: math.pi / 4,
                        child: Container(
                          width: 40.r,
                          height: 40.r,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: const Color.fromARGB(255, 151, 247, 151),
                            borderRadius: BorderRadius.circular(3),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      child: Container(
                        width: 200.r,
                        height: 80.r,
                        decoration: BoxDecoration(
                          color: const Color.fromARGB(255, 151, 247, 151),
                          borderRadius: BorderRadius.circular(15),
                        ),
                        child:
                            LottieBuilder.asset('assets/jsons/recording.json'),
                      ),
                    ),
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  InkWell(
                    child: Column(
                      children: [
                        Visibility(
                          visible: state.isOutEffect,
                          child: Container(
                            margin: const EdgeInsets.only(bottom: 6),
                            child: Text(
                              '点击 取消',
                              style: TextStyle(
                                color: const Color(0xffababab),
                                fontSize: 20.sp,
                              ),
                            ),
                          ),
                        ),
                        Container(
                          width: 70.r,
                          height: 70.r,
                          decoration: BoxDecoration(
                            color: state.isOutEffect
                                ? const Color(0xfff5f5f5)
                                : Colors.black38,
                            borderRadius: BorderRadius.circular(35.r),
                          ),
                          child: Icon(
                            IconUtil.wrong,
                            color: const Color(0xffababab),
                            size: 24.r,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Visibility(
                    visible: !state.isOutEffect,
                    child: Text(
                      '松开 发送',
                      style: TextStyle(
                        color: const Color(0xffababab),
                        fontSize: 20.sp,
                      ),
                    ),
                  ),
                  InkWell(
                    child: Container(
                      width: 70.r,
                      height: 70.r,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.black38,
                        borderRadius: BorderRadius.circular(35.r),
                      ),
                      child: Text(
                        '文',
                        style: TextStyle(
                          color: const Color(0xffababab),
                          fontSize: 28.sp,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              Container(
                key: state.effectKey,
                margin: EdgeInsets.only(top: 20.r),
                decoration: BoxDecoration(
                  color: state.isOutEffect
                      ? const Color(0xff696969)
                      : const Color(0xffDCDCDC),
                  borderRadius: BorderRadius.vertical(
                    top: Radius.elliptical(400.r, 100.r),
                  ),
                ),
                child: SafeArea(
                  child: Container(
                    height: 60.r,
                    alignment: Alignment.center,
                    child: Icon(
                      Icons.record_voice_over,
                      size: 30.r,
                      color: Colors.grey,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
